---
title: テスト
description: Astroでのテスト入門
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


テストは、動作するAstroコードを書き、メンテナンスするために役立ちます。Astroは、Jest、Mocha、Jasmine、[Cypress](https://cypress.io)、[Playwright](https://playwright.dev)など、ユニットテスト、コンポーネントテスト、エンドツーエンド（E2E）テスト用の人気ツールを多数サポートしています。UIフレームワークのコンポーネントをテストするために、React Testing Libraryなど特定フレームワーク向けのテストライブラリをインストールすることもできます。

テストフレームワークにより、コードが特定の状況でどのように動作するべきかについての**アサーション**または**期待値**を記述し、これらを現在のコードの実際の動作と比較できます。

## Vitest

esbuildによるESM、TypeScript、JSXサポートを備えた、Viteネイティブのユニットテストフレームワークです。

Astroの`getViteConfig()`ヘルパーを[`vitest.config.ts`設定ファイル](https://vitest.dev/config/)で使用すると、Astroプロジェクトの設定ファイルによりVitestを設定できます。

```js
// vitest.config.ts
import { getViteConfig } from 'astro/config';

export default getViteConfig({
  test: {
    // Vitestの設定オプション
  },
});
```

GitHubの[Astro + Vitestスターターテンプレート](https://github.com/withastro/astro/tree/latest/examples/with-vitest)を参照してください。

## Cypress

Cypressは、モダンなウェブのために作成されたフロントエンドテストツールです。Cypressにより、AstroサイトのE2Eテストを記述できます。

### インストール

お好みのパッケージマネージャーを使用してCypressをインストールできます。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install -D cypress
  ```

  これにより、プロジェクトの開発用依存関係としてCypressがローカルにインストールされます。
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add cypress --save-dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add cypress --dev
  ```
  </Fragment>
</PackageManagerTabs>

### 設定

プロジェクトのルートに、以下の内容の`cypress.config.js`ファイルを作成します。

```js title="cypress.config.js"
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    supportFile: false
  }
})
```

### 最初のCypressのテストを作成する

1. テストするページを選択します。ここでは以下の`index.astro`ページを例としてテストします。

    ```html title="src/pages/index.astro"
    ---
    ---
    <html lang="ja">
      <head>
        <title>Astro最高!</title>
        <meta name="description" content="Astroの次世代アイランドアーキテクチャーにより、どこからでもコンテンツを取り込み、高速に配信することができます。" />
      </head>
      <body>
      <h1>Hello world from Astro</h1>
      </body>
    </html>
    ```

2. `cypress/e2e`フォルダに`index.cy.js`ファイルを作成します。以下のテストをファイルで使用し、ページのタイトルとヘッダーが正しいことを確認します。

    ```js title="cypress/e2e/index.cy.js"
    it('タイトルが正しい', () => {
      const page = cy.visit('http://localhost:4321');

      page.get('title').should('have.text', 'Astro最高!')
      page.get('h1').should('have.text', 'Hello world from Astro');
    });
    ```

    :::tip[baseUrlをセットする]
    [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress)を`cypress.config.js`の設定ファイルに定義して`cy.visit("/")`を使用すると、`cy.visit("http://localhost:4321/")`よりも楽にURLを扱うことができます。
    :::

### Cypressのテストを実行する

コマンドラインやCypressアプリケーションを通じてCypressを実行できます。アプリケーションは、テストの実行とデバッグのためのビジュアルインターフェースを提供します。

まず、動作中のサイトにCypressがアクセスできるように、開発用サーバーを起動します。

コマンドラインから上の例のテストを実行するには、次のコマンドを実行します。

```shell
npx cypress run
```

または、次のコマンドを実行してCypressアプリケーションによりテストを実行します。

```shell
npx cypress open
```

Cypressアプリケーションが起動したら、**E2E Testing**を選択し、テストを実行するブラウザを選択します。

テストの実行が完了すると、緑色のチェックマークが表示され、テストがパスしたことを確認できます。

```shell title="Output from npx cypress run"
Running:  index.cy.js                                                                     (1 of 1)


✓ titles are correct (107ms)

1 passing (1s)
```

:::note[テストを失敗させる]
テストが本当に動作しているかを確認するために、`index.astro`ファイルの以下の行を変更します。

```astro title="src/pages/index.astro" del={2} ins={3}
  <body>
    <h1>Hello world from Astro</h1>
    <h1>Hello from Astro</h1>
  </body>
```

そしてテストを再実行します。テストが失敗したことを示す赤い「x」が出力されるはずです。
:::

### 次のステップ

Cypressについての詳細は、以下のリンクを参照してください。

- [Introduction to Cypress](https://docs.cypress.io/guides/basics/introduction-to-cypress)
- [Testing Your App](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app)

## Playwright

Playwrightは、モダンなウェブアプリケーションのためのE2Eテストフレームワークです。Playwright APIをJavaScriptやTypeScriptで使用し、Chromium、WebKit、FirefoxなどのすべてのモダンなレンダリングエンジンでAstroコードをテストできます。

### インストール

[VS Code拡張機能](https://playwright.dev/docs/getting-started-vscode)を使用してテストを実行できます。

または、お好みのパッケージマネージャーを使用してAstroプロジェクトにPlaywrightをインストールできます。CLIの各ステップに従って、JavaScriptかTypeScriptを選択し、テストフォルダを命名し、オプションのGitHub Actionsワークフローを追加してください。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init playwright@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm dlx create-playwright
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create playwright
  ```
  </Fragment>
</PackageManagerTabs>

### 初めてのPlaywrightのテストを作成する

1. テストするページを選択します。ここでは以下の`index.astro`ページを例としてテストします。

    ```html title="src/pages/index.astro"
    ---
    ---
    <html lang="ja">
      <head>
        <title>Astro最高!</title>
        <meta name="description" content="Astroの次世代アイランドアーキテクチャーにより、どこからでもコンテンツを取り込み、高速に配信することができます。" />
      </head>
      <body></body>
    </html>
    ```

1. 新しいフォルダを作成し、`src/test`に以下のテストファイルを追加します。以下のテストをファイルに貼り付けて、ページのメタ情報が正しいことを確認します。ページの`<title>`の値を、テストするページと一致するように更新してください。

    ```jsx title="src/test/index.spec.ts" "Astro最高!"
    import { test, expect } from '@playwright/test';

    test('メタ情報が正しい', async ({ page }) => {
      await page.goto("http://localhost:4321/");

      await expect(page).toHaveTitle('Astro最高!');
    });
    ```

    :::tip[baseurlをセットする]
    設定ファイル`playwright.config.ts`で[`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)と設定すると、`page.goto("http://localhost:4321/")`の代わりに、より便利なURLとして`page.goto("/")`を使用できます。
    :::

### Playwrightのテストを実行する

ひとつまたは複数のテストを、複数のブラウザで実行可能です。デフォルトでは、テスト結果はターミナルに表示されます。必要に応じて、HTML Test Reporterを開いて完全なレポートを表示したり、テスト結果をフィルタリングできます。

1. 上の例のテストをコマンドラインから実行するには、`test`コマンドを使用します。単一のテストのみを実行する場合は、ファイル名をコマンドに含めます。

    ```sh
    npx playwright test index.spec.ts
    ```

1. HTML Test Reportの全体を確認するには、次のコマンドを使用して開きます。

    ```sh
    npx playwright show-report
    ```

:::tip
実際にデプロイされたサイトにより近付けるため、本番環境のコードをテストしましょう。
:::

#### 応用：テスト中に開発用Webサーバーを起動する

Playwrightの設定ファイルで[`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests)オプションを使用すると、テストスクリプトの実行時に、Playwrightに開発用Webサーバーを起動させることもできます。

以下はnpmを使用する場合の設定とコマンドの例です。

1. プロジェクトのルートにある`package.json`ファイルに、`"test:e2e": "playwright test"`のようにテストスクリプトを追加します。

1. `playwright.config.ts`に`webServer`オブジェクトを追加し、コマンドの値を`npm run preview`に設定します。

    ```js title="playwright.config.ts" ins={4-9} "npm run preview"
    import { defineConfig } from '@playwright/test';
    
    export default defineConfig({
      webServer: {
        command: 'npm run preview',
        url: 'http://localhost:4321/',
        timeout: 120 * 1000,
        reuseExistingServer: !process.env.CI,
      },
      use: {
        baseURL: 'http://localhost:4321/',
      },
    });
    ```

1. `npm run build`を実行した上で、`npm run test:e2e`によりPlaywrightのテストを実行します。

Playwrightについての詳細は、以下のリンクを参照してください。

- [Getting started with Playwright](https://playwright.dev/docs/intro)
- [Use a development server](https://playwright.dev/docs/test-webserver#configuring-a-web-server)
